<div class="row">
    <div class="col-xs-offset-9 col-xs-3">
        <a href="{:url('register')}" class=" btn " style="color: grey">注册</a>
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-md-5 col-md-offset-6">
        <form class="form-horizontal"  action="{:url('');}"  method="post">
            <div class="form-group row">
                <label for="input_phone" class="col-sm-3 control-label">手机/邮箱</label>
                <div class="col-sm-9">
                    <input name="phone" type="phone" class="form-control" id="input_phone" placeholder="手机/邮箱">
                </div>
            </div>
            <div class="form-group row">
                <label for="input_password" class="col-sm-3 control-label">密码</label>
                <div class="col-sm-9">
                    <input name="password" type="password" class="form-control" id="input_password" placeholder="密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-8 col-sm-offset-2"><img id="captcha" src="{:url('user/captcha')}" alt="captcha"  />
                </div>
                <div class="col-sm-9" style="margin-top:20px;">
                    <input name="captcha"  type="captcha" class="form-control" id="input_password" placeholder="验证码">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-offset-8 col-md-4">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="keep"> 保持登陆状态
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-offset-2 col-sm-9">
                    <button id="submit" type="submit" class="btn btn-default" style="width: 100%">登陆</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $ (function ()
    {
        $ ("#captcha").on ('click', function ()
        {
            let img_src = $ (this).attr ('src') + "?seed=" + Math.random;
            $ (this).attr ('src', img_src);
        });

        function error_layer (msg)
        {
            layer.open ({
                title: '错误提示',
                icon: 2,
                content: msg,
                yes: function ()
                {
                    layer.closeAll ();
                }
            });
        }

        function success_layer (msg)
        {
            layer.open ({
                title: '成功提示',
                icon: 1,
                content: msg,
                yes: function ()
                {
                    location.href = "{:merge_url('plan/plan_list');}";
                    layer.closeAll ();
                }
            });
        }

        $ ("#submit").on ('click', function (eve)
        {
            eve.preventDefault ();
            let url = $ ('form').attr ('action');
            let data = {
                phone: $ ('input[name="phone"]').val (),
                password: $ ('input[name="password"]').val (),
                captcha: $ ('input[name="captcha"]').val (),
            };
            $.post (url, data, function (res)
            {
                $ ("#captcha").click ();
                if (res.code)
                {
                    success_layer (res.msg);
                }
                else
                {
                    error_layer (res.msg);
                }
            });
        });
    });

</script>